<template>
  <div class="out">
    <div class="bigTitle">留言</div>
    <div class="out_container">
      <div class="title">您对本站的建议</div>
      <div class="message">
        <p>本站主题：个人博客</p>
        <p>name：影子</p>
        <p>欢迎在下方留言！</p>
        <div class="comment">
          <textarea cols="30" rows="10"></textarea>
          <button @click="send">发送</button>
          <div
            ref="comment_list"
            class="comment_list"
            v-for="item in comments"
            :key="item.time"
          >
            <div ref="container" class="container">
              <div class="time">
                <i class="iconfont icon-a-bianzu14"></i>{{ item.time }}
              </div>
              <div class="list">{{ item.content }}</div>
              <div class="icon">
                <i class="iconfont icon-xihuan_like">{{ item.likes }}</i>
                <i class="iconfont icon-pinglun-liuyan">{{ item.discuss }}</i>
                <a
                  href="javascript:;"
                  style="
                    position: absolute;
                    right: 280px;
                    text-decoration: none;
                  "
                  >删除</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="circle1"></div>
    <div class="circle2"></div>
    <div class="circle3"></div>
  </div>
</template>

<script>
export default {
  name: "mycomments",
  data() {
    return {
      comments: "", //留言内容
    };
  },
  mounted() {
    // 一挂载就发送请求获取后台留言数据
    this.getDBComments();
  },
  methods: {
    send() {
      // 获取元素
      var text = document.querySelector("textarea");
      if (text.value == "") {
        alert("您没有留下任何信息");
      } else {
        var formdata = new FormData();
        formdata.append("time", new Date().getTime()); //向数据库上传时间戳
        formdata.append("content", text.value);
        formdata.append("like", Math.floor(Math.random() * 1314));
        formdata.append("discuss", Math.floor(Math.random() * 520));
        text.value = ""; //清空文本框的内容
        // 将留言内容与发布时间保存数据库中
        this.$axios({
          url: "/api/myComments",
          method: "post",
          data: formdata,
        })
          .then(function (res) {
            if (res.data.status == 200) {
              // location.reload(); //上传成功之后重新刷新页面
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
      location.reload(); //重新加载页面
    },
    // 向服务器发请求获取留言数据
    getDBComments() {
      this.$axios.get("/api/getComments").then((res) => {
        if ((res.data.status = 200)) {
          res.data.comments.sort((a, b) => {
            return b.time - a.time; //倒序
          });
          this.comments = res.data.comments.map((item) => {
            item.time = this.formatDate(
              new Date(+item.time),
              "yyyy/MM/dd HH:mm:ss 星期w"
            );
            return item;
          });
        } else {
          alert("获取数据失败");
        }
      });
    },
    // 处理时间格式
    formatDate(time, str) {
      var obj = {
        yyyy: time.getFullYear(),
        yy: ("" + time.getFullYear()).slice(-2),
        M: time.getMonth() + 1,
        MM:
          time.getMonth() + 1 > 9
            ? (time.getMonth() + 1).toString()
            : "0" + (time.getMonth() + 1),
        d: time.getDate(),
        dd:
          time.getDate() > 9 ? time.getDate().toString() : "0" + time.getDate(),
        H: time.getHours(),
        HH:
          time.getHours() > 9
            ? time.getHours().toString()
            : "0" + time.getHours(),
        m: time.getMinutes(),
        mm: ("0" + time.getMinutes()).slice(-2),
        s: time.getSeconds(),
        ss: ("0" + time.getSeconds()).slice(-2),
        w: ["日", "一", "二", "三", "四", "五", "六"][time.getDay()],
      };
      return str.replace(/([a-z]+)/gi, function (time) {
        return obj[time];
      });
    },
  },
};
</script>

<style lang="less" scoped>
.out {
  // position: relative;
  .bigTitle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 40px;
  }
  .out_container {
    // position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1000px;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 20px;
    border-radius: 20px;
    /* 设置渐变色 */
    background: linear-gradient(
      to right,
      rgba(66, 12, 12, 0.4),
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.2)
    );
    /* *****重点：使元素背景模糊化，backdrop-filter 是使透过该层的底部元素模糊化，值越大越模糊，注意区别于filter */
    backdrop-filter: blur(10px);
    /* filter是使该元素本身模糊化 */
    /* filter: blur(10px); */
    /* 设置上高光和左高光 */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    .title {
      font-size: 26px;
    }
    .message {
      width: 500px;
      margin-top: 10px;
      p {
        font-size: 18px;
      }
      .comment {
        textarea {
          background-color: rgba(188, 226, 231, 0.3);
          border: none;
          height: 100px;
          font-size: 18px;
          border-radius: 10px;
          width: 400px;
        }
        button {
          position: relative;
          margin-left: 5px;
          border: none;
          background-color: rgba(188, 226, 231, 0.3);
          width: 50px;
          height: 30px;
          border-radius: 10px;
        }
        .comment_list {
          width: 600px;
          margin-left: -100px;
          padding: 5px 20px;
          display: flex;
          flex-direction: column;
          .container {
            border: 1px dotted rgba(163, 240, 253, 0.7);
            padding: 15px 15px;
            margin-bottom: 10px;
            border-radius: 25px;
            .time {
              margin-top: 10px;
              height: 30px;
              line-height: 30px;
              margin-bottom: 8px;
              padding-left: 20px;
              border-radius: 15px;
              font-size: 14px;
              background-color: rgba(241, 237, 237, 0.2);
              i {
                margin-right: 15px;
              }
            }
            .list {
              margin-left: 30px;
              padding: 15px 20px;
              padding-left: 20px;
              padding-right: 20px;
              border-radius: 15px;
              background-color: rgba(241, 237, 237, 0.3);
              // 多行文本显示
              // overflow: hidden;
              // text-overflow: ellipsis;
              // display: -webkit-box;
              // -webkit-box-orient: vertical;
              // -webkit-line-clamp: 2;
            }
            .icon {
              margin-left: 40px;
              margin-top: 5px;
              i {
                margin: 0 5px;
              }
              a {
                color: black;
              }
            }
          }
        }
      }
    }
  }
  /* 设置那几个球 */
  .circle1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 180px;
    left: 180px;
    background: rgba(186, 248, 227, 0.7);
    z-index: -99;
  }
  .circle2 {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 430px;
    left: 400px;
    background: rgba(232, 250, 201, 0.7);
    z-index: -99;
  }
  .circle3 {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    /* 相对于父元素的绝对定位 */
    position: fixed;
    top: 250px;
    left: 1100px;
    background: rgba(149, 200, 241, 0.7);
    z-index: -99;
  }
}
</style>